<template>
  <div class="tableListBox">
    <div class="common-header">
      <div style="cursor: pointer" @click="back">
        <i class="vxe-icon-arrow-left" style="vertical-align: middle"></i><span style="vertical-align: middle">返回</span>
      </div>
      <div v-show="!isDisabled">
        <el-button type="primary" size="small" @click="save">保存</el-button>
      </div>
    </div>
    <div class="anthorContent">
      <el-scrollbar style="height: 100%; padding-bottom: 20px">
        <p class="title"><span class="titleName">合同基本信息</span></p>
        <vxe-form ref="form" :data="form" :rules="formRules" title-align="right" title-width="110"
          class-name="anthorContent-item" @submit="searchEvent">
          <vxe-form-item title="合同编码" field="contractNumber" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.contractNumber" class="normal" placeholder="合同编码"
                :disabled="isDisabled"></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="委托方" field="customerName" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.customerName" class="normal" placeholder="委托方" readonly
                :disabled="isDisabled || form.isHasAssociatedSampleOrders" @click="openCustomer"></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="合同名称" field="contractName" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.contractName" class="normal" placeholder="合同名称" :disabled="isDisabled"></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="合同属性" field="contractProp" :item-render="{}">
            <template #default="{ data }">
              <vxe-select v-model="data.contractProp" class-name="width-100" placeholder="合同属性" disabled>
                <vxe-option value="CSCEC5B" label="五局"></vxe-option>
                <vxe-option value="INNER" label="内部"></vxe-option>
                <vxe-option value="OUTER" label="外部"></vxe-option>
              </vxe-select>
            </template>
          </vxe-form-item>
          <!-- <vxe-form-item v-if="isDisabled" title="受托方" field="agentName" :item-render="{}">
            <template #default="{ data }">
              <vxe-input
                v-model="data.agentName"
                class="normal"
                placeholder="受托方"
                :disabled="isDisabled"
              ></vxe-input>
            </template>
          </vxe-form-item> -->
          <vxe-form-item title="项目名称" field="projectName" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.projectName" class="normal" placeholder="项目名称" :disabled="isDisabled"></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="项目地址" field="projectAddress" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.projectAddress" class="normal" placeholder="项目地址"
                :disabled="isDisabled"></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="工程类别" field="projectCategory" :item-render="{}">
            <template #default="{ data }">
              <vxe-select v-model="data.projectCategory" class-name="width-100" placeholder="工程类别" :disabled="isDisabled">
                <vxe-option value="BUILDING_CITY_HALL" label="建筑市政"></vxe-option>
                <vxe-option value="BUILDING_HOUSING" label="建筑房建"></vxe-option>
                <vxe-option value="BUILDING_TRACK" label="建筑轨道"></vxe-option>
                <vxe-option value="HIGHWAY_PROJECT" label="公路工程"></vxe-option>
                <vxe-option value="RAILWAY_PROJECT" label="铁路工程"></vxe-option>
                <vxe-option value="RAILWAY_PROJECT" label="水利工程"></vxe-option>
              </vxe-select>
            </template>
          </vxe-form-item>
          <vxe-form-item title="签订日期" field="contractSigningDate" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.contractSigningDate" placeholder="签订日期" type="date"
                :disabled="isDisabled"></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="委托方负责人" field="customerManagerName" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.customerManagerName" class="normal" placeholder="委托方负责人" disabled></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="负责人联系方式" field="customerManagerNumber" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.customerManagerNumber" class="normal" placeholder="负责人联系方式" disabled></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="合同额(元)" field="contractAmount" :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.contractAmount" class="normal" placeholder="合同额"
                :disabled="isDisabled"></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item title="定价方式" field="pricingType" :item-render="{}">
            <template #default="{ data }">
              <vxe-select v-model="data.pricingType" class-name="width-100" placeholder="定价方式"
                :disabled="isDisabled || form.isHasAssociatedSampleOrders">
                <vxe-option value="STANDARD_PRICE" label="单价合同"></vxe-option>
                <vxe-option value="CONTRACT_PRICE" label="总价包干"></vxe-option>
              </vxe-select>
            </template>
          </vxe-form-item>

          <vxe-form-item v-if="form.pricingType === 'STANDARD_PRICE'" title="收费标准" field="chargeStdName"
            :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.chargeStdName" class="normal" placeholder="收费标准" readonly :disabled="isDisabled"
                @click="openStd"></vxe-input>
            </template>
          </vxe-form-item>
          <vxe-form-item v-if="form.pricingType === 'STANDARD_PRICE'" title="折扣率(%)" field="discountRate"
            :item-render="{}">
            <template #default="{ data }">
              <vxe-input v-model="data.discountRate" type="number" class="normal" :min="1" :max="100"
                placeholder="折扣率(1-100)" :disabled="isDisabled"></vxe-input>
            </template>
          </vxe-form-item>
        </vxe-form>

        <template v-if="form.pricingType === 'CONTRACT_PRICE'">
          <p class="title"><span class="titleName">收费详单</span></p>
          <div v-show="!isDisabled" class="title-operation anthorContent-item">
            <!-- <el-button type="" size="small" @click="imp">导入</el-button> -->
            <el-button type="primary" size="small" @click="addProject">增加检测项目</el-button>
          </div>
          <div class="anthorContent-item">
            <CommonTable ref="common" :columns="tableColumn" :tableData="tableData" :isEdit="!isDisabled" />
          </div>
        </template>
        <template v-if="isEdit && isDisabled">
          <p class="title"><span class="titleName">收款详情</span></p>
          <div class="anthorContent-item">
            <CollectionTable ref="settleRecord" :columns="settleColumns" :tableData="settleRecords" />
          </div>
        </template>
        <p class="title"><span class="titleName">合同附件</span></p>
        <div class="anthorContent-item">
          <p v-if="!isDisabled">
            <i class="el-icon-paperclip"></i><em class="file-tip">上传附件</em><span
              class="file-limit-tip">（单个文件最大500M，仅限上传单个文件）</span>
          </p>
          <el-upload v-if="!isDisabled" class="upload" drag :show-file-list="false" action="" :auto-upload="false"
            :on-change="selFileList">
            <div class="el-upload__text">拖拽或<em>点击上传附件</em></div>
          </el-upload>
          <div v-if="form.contractFileList.length > 0" class="anthorContent-item-fileList">
            <div v-for="file in form.contractFileList" :key="file.uid" class="fileList-item">
              <i class="el-icon-paperclip fileList-item-beforeIcon"></i><span class="fileList-item-filename">{{
                file.fileName || file.name }}</span>
              <i v-if="isEdit" class="el-icon-download pointer fileList-item-afterIcon" @click="download(file)"></i>
              <i v-if="!isDisabled" class="el-icon-close pointer fileList-item-afterIcon" @click="delFile(file)"></i>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <SelectFromTableDialog ref="std" type="radio" title="收费标准列表" :searchConfig="stdSearchConfig" :columns="stdColumns"
      :tableData="chargeStdList" :total="stdTotal" @search="getChargeStdPage" @submit="getStd" />
    <SelectFromTableDialog ref="customer" type="radio" title="客户列表" :searchConfig="customerSearchConfig"
      :columns="customerColumns" :tableData="customerList" :total="customerTotal" @search="getCustomerList"
      @pager="getCustomerList" @submit="getCustomer" />
    <SelectFromTreeTableDialog ref="treeTable" v-model="checkParams" :tableData="treeTableData" :columns="columns"
      @search="getList" @refreshStd="refreshStd" @submit="selParam" />
  </div>
</template>
<script>
import * as ExcelJS from 'exceljs';
import { v4 as uuidv4 } from 'uuid';
import VXETable from 'vxe-table';
import CommonTable from './table.vue';
import CollectionTable from '../dialog/common.vue';
import SelectFromTableDialog from '/@/components/SelectFromTableDialog';
import SelectFromTreeTableDialog from '/@/components/SelectFromTreeTableDialog';
import util from '/@/util/util';
export default {
  components: { CommonTable, CollectionTable, SelectFromTreeTableDialog, SelectFromTableDialog },
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    isDisabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      formRules: {
        contractName: [{ required: true, message: '合同名称必填' }],
        projectName: [{ required: true, message: '项目名称必填' }],
        customerName: [{ required: true, message: '委托方必填' }],
        projectAddress: [{ required: true, message: '项目地址必填' }],
        projectCategory: [{ required: true, message: '工程类别必填' }],
        contractSigningDate: [{ required: true, message: '签订日期必填' }],
        pricingType: [{ required: true, message: '定价方式必填' }],
        chargeStdName: [{ required: true, message: '收费标准' }],
        discountRate: [{ required: true, message: '折扣率必填' }],
      },
      form: {
        id: '',
        contractNumber: '',
        contractName: '',
        contractProp: '',
        customerName: '',
        agentName: '重新信达工程检测技术有限公司',
        projectName: '',
        projectAddress: '',
        projectCategory: '',
        contractSigningDate: '',
        chargeStdId: '',
        chargeStdName: '',
        discountRate: 100, // 折扣率(标准定价时)
        customerId: '',
        customerManagerName: '',
        customerManagerNumber: '',
        pricingType: '',
        contractAmount: '',
        contractFileList: [],
        chargeDetailList: [],
        isHasAssociatedSampleOrders: false,
      },
      fileId: null,
      stdForm: {
        infoId: '',
      },
      checkParams: [],
      dataParams: {
        page: 1,
        size: 10,
      },
      tableColumn: [
        {
          field: 'name',
          treeNode: true,
          minWidth: 100,
          title: '检测项目 / 检测参数',
          editRender: {},
          slots: {
            default: 'd_itemName',
            edit: 'd_itemName',
          },
        },
        {
          field: 'detectQty',
          title: '检测工程量',
          width: 100,
          align: 'center',
          editRender: {},
          slots: {
            edit: 'e_detectQty',
            default: 'd_detectQty',
          },
        },
        {
          field: 'salesUnit',
          title: '单位',
          width: 100,
          align: 'center',
          editRender: {},
          slots: {
            edit: 'd_salesUnit',
            default: 'd_salesUnit',
          },
        },
        {
          field: 'unitPrice',
          title: '标准单价(元)',
          width: 100,
          align: 'center',
          editRender: {},
          slots: {
            edit: 'd_unitPrice',
            default: 'd_unitPrice',
          },
        },
        {
          field: 'contractPrice',
          title: '合同单价(元)',
          width: 100,
          align: 'center',
          editRender: {},
          slots: {
            edit: 'e_contractPrice',
            default: 'd_contractPrice',
          },
        },
        {
          field: 'totalPrice',
          title: '价格合计',
          width: 100,
          align: 'center',
          editRender: {},
          slots: {
            edit: 'd_totalPrice',
            default: 'd_totalPrice',
          },
        },
        {
          field: 'meanDiscountRate',
          title: '与标准比较折扣(%)',
          width: 140,
          align: 'center',
          editRender: {},
          slots: {
            default: 'd_meanDiscountRate',
            edit: 'd_meanDiscountRate',
          },
        },
        {
          field: 'workingHours',
          title: '标准工时',
          width: 100,
          align: 'center',
          editRender: {},
          slots: {
            edit: 'd_workingHours',
            default: 'd_workingHours',
          },
        },
        {
          field: 'totalWorkingHours',
          title: '工时合计',
          width: 100,
          align: 'center',
          editRender: {},
          slots: {
            edit: 'd_totalWorkingHours',
            default: 'd_totalWorkingHours',
          },
        },
        {
          field: 'remarks',
          title: '备注',
          width: 150,
          align: 'center',
          editRender: {},
          slots: {
            edit: 'd_remarks',
            default: 'd_remarks',
          },
        },
        {
          field: 'modifierName',
          title: '更新人',
          width: 100,
          align: 'center',
          editRender: {},
          slots: {
            edit: 'd_modifier',
            default: 'd_modifier',
          },
        },
        {
          field: 'modifyTime',
          title: '更新时间',
          width: 100,
          align: 'center',
          editRender: {},
          slots: {
            edit: 'd_modifyTime',
            default: 'd_modifyTime',
          },
        },
      ],
      columns: [
        {
          field: 'name',
          type: 'checkbox',
          treeNode: true,
          title: '检测项目 / 检测参数',
          editRender: {},
          slots: {
            default: 'd_itemName',
            // edit: 'e_itemName',
          },
        },
        {
          field: 'itemShortName',
          title: '项目编号拼音简称',
          editRender: {},
        },

        {
          field: 'salesUnit',
          title: '计价单位',
          width: 80,
          align: 'center',
          editRender: {},
        },
        {
          field: 'unitPrice',
          title: '单价(元)',
          align: 'center',
          width: 100,
          editRender: {},
        },
        {
          field: 'domainNames',
          title: '检测领域',
          editRender: {},
        },
        {
          field: 'detectionStdList',
          title: '检测标准',
          editRender: {},
          slots: {
            default: 'd_detectionStdList',
            // edit: 'e_itemName',
          },
        },
        {
          field: 'workingHours',
          title: '工时',
          align: 'center',
          width: 80,
          editRender: {},
        },
        {
          field: 'remarks',
          title: '备注',
          editRender: {},
        },
      ],
      customerColumns: [
        {
          type: 'radio',
          title: '',
          width: 60,
          editRender: {},
        },
        {
          field: 'companyName',
          title: '单位名称',
          editRender: {},
        },
        {
          field: 'contactsName',
          title: '负责人',
          editRender: {},
        },
        {
          field: 'contactsInfo',
          title: '联系方式',
          editRender: {},
        },
      ],
      customerSearchConfig: [
        {
          label: '单位名称',
          field: 'companyName',
        },
      ],
      stdSearchConfig: [
        {
          label: '收费标准版本号',
          field: 'versionName',
        },
      ],
      stdColumns: [
        {
          type: 'radio',
          title: '',
          width: 60,
          editRender: {},
        },
        {
          field: 'versionName',
          title: '收费标准版本号',
          editRender: {},
        },
      ],
      settleColumns: [
        {
          type: 'seq',
          width: 60,
          title: '序号',
        },
        {
          field: 'settleAmount',
          title: '收款金额',
          editRender: {},
          slots: {
            default: 'd_settleAmount',
          },
        },
        {
          field: 'settleName',
          title: '收款人',
          editRender: {},
          slots: {
            default: 'd_settleName',
          },
        },
        {
          field: 'settleTime',
          title: '收款时间',
          editRender: {},
          slots: {
            default: 'd_settleTime',
          },
        },
        {
          field: 'remarks',
          title: '备注',
          editRender: {},
          slots: {
            default: 'd_remarks',
          },
        },
      ],
      tableData: [],
      treeTableData: [],
      settleRecords: [],
      customerList: [],
      customerTotal: 0,
      chargeStdList: [],
      stdTotal: 0,
    };
  },
  async created() {
    this.getQuery();
    await this.getCustomerList();
    await this.getChargeStdPage();
    if (this.isEdit) {
      await this.getDetail();
    }
    await this.getList();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    getQuery() {
      const { id, contractNumber } = this.$route.query;
      this.form.id = id;
      this.form.contractNumber = contractNumber;
    },
    async getDetail() {
      await this.$api
        .getContractDetail({
          contractId: this.form.id,
        })
        .then((res) => {
          try {
            const { chargeItemList, customerInfo, contractSettleRecordList, discountRate } = res.data;
            Object.keys(this.form).forEach((key) => {
              this.form[key] = res.data[key];
            });
            this.form.discountRate = (discountRate || 0) * 100;
            this.form.customerName = customerInfo.companyName;
            chargeItemList.forEach((item) => {
              item.chargeParamList.forEach((it) => {
                /* 这里为什么要引入oldId呢？
                因为根据之前的做法，是把收费详单的数据替换了检测参数列表的数据的，编辑时会存在数据的id，
                和原来的检测参数的id冲突了，这里把编辑时的id换成oldId，避免冲突
                */
                it.oldId = it.id;
              });
            });
            this.tableData = chargeItemList;
            this.settleRecords = contractSettleRecordList;
          } catch { }
        });
    },
    getList(params = { itemName: null }) {
      if (!this.stdForm.infoId) return;
      this.$api
        .getChargeStdDetail({
          infoId: this.stdForm.infoId,
          ...params,
        })
        .then((res) => {
          // 我的想法是让收费详情已经存在的检测参数数据，通过替换检到测参数列表，来保持数据的完整性。
          /* 做法是详情获取到的收费详单与监测项目/检测参数对比，将详情数据赋值给参数列表，
          记得带上已经存在的数据，比如检测工程量，合同单价，折扣等这些手填的数据。
          */
          const { chargeStdItemList } = res.data;
          let data = {};
          this.tableData.forEach((item) => {
            const child = {};
            item.chargeParamList.forEach((it) => {
              child[it.paramId] = it;
            });
            data[item.itemId] = child;
          });
          chargeStdItemList.forEach((item) => {
            const second = data[item.id];
            if (second) {
              item.chargeStdParamList.forEach((it) => {
                const third = second[it.id];
                if (third) {
                  it.oldId = third.id;
                  it.detectQty = third.detectQty;
                  it.contractPrice = third.contractPrice;
                  it.meanDiscountRate = third.meanDiscountRate;
                  it.totalWorkingHours = third.totalWorkingHours;
                  it.totalPrice = third.totalPrice;
                  it.modifier = third.modifier || third.creator;
                  it.modifierName = third.modifierName || third.creatorName;
                  it.modifyTime = third.modifyTime || third.createTime;
                }
              });
            }
          });
          this.treeTableData = chargeStdItemList;
        });
    },
    getCustomerList(params = { page: 1, size: 10 }) {
      this.$api.getCustomerPage(params).then((res) => {
        this.customerList = res.data.list;
        this.customerTotal = res.data.total;
      });
    },
    getCustomer(data) {
      this.form.customerId = data.id;
      this.form.customerName = data.companyName;
      this.form.customerManagerName = data.contactsName;
      this.form.customerManagerNumber = data.contactsInfo;
      this.form.contractProp = data.contractProp;
    },
    openCustomer() {
      this.$refs.customer.dialogVisible = true;
    },
    getChargeStdPage(params = { isEnabled: true, page: 1, size: 10 }) {
      this.$api.getChargeStdPage(params).then((res) => {
        this.chargeStdList = res.data.list;
        this.stdTotal = res.data.total;
      });
    },
    refreshStd(data) {
      this.stdForm.infoId = data.infoId;
      this.getList();
    },
    getStd(data) {
      this.form.chargeStdName = data.versionName;
      this.form.chargeStdId = data.id;
    },
    openStd() {
      this.$refs.std.dialogVisible = true;
    },
    addProject() {
      this.checkParams = this.tableData;
      this.$refs.treeTable.selFirstStd();
      this.$refs.treeTable.dialogVisible = true;
    },
    async imp() {
      try {
        const workbook = new ExcelJS.Workbook();
        const { file } = await VXETable.readFile();
        const reader = new FileReader();
        reader.readAsArrayBuffer(file);
        reader.onload = (event) => {
          var readerTarget = event.target;
          const buffer = readerTarget.result;
          workbook.xlsx.load(buffer).then((wb) => {
            var firstSheet = wb.worksheets[0];
            if (firstSheet) {
              var sheetValues = firstSheet.getSheetValues();
              const fieldIndex = 3;
              const records = sheetValues.slice(fieldIndex);
              const fields = [
                'infoId',
                'itemId',
                'itemName',
                'itemShortName',
                'id',
                'paramName',
                'salesUnit',
                'unitPrice',
                'domainNames',
                'detectionStds',
                'workingHours',
                'remarks',
                'isEnabled',
              ];
              const result = records.map((item) => {
                const obj = {};
                fields.forEach((field, i) => {
                  obj[field] = item[i + 1];
                });
                return obj;
              });
              const chargeItemList = result.reduce((prev, cur) => {
                cur.paramId = cur.id;
                const item = prev.find((item) => item.itemId === cur.itemId);
                if (item) {
                  item.chargeParamList.push(cur);
                } else {
                  prev.push({
                    infoId: cur.infoId,
                    itemId: cur.itemId,
                    itemName: cur.itemName,
                    chargeParamList: [cur],
                  });
                }
                return prev;
              }, []);
              this.tableData = chargeItemList;
              VXETable.modal.message({
                content: '导入成功',
                status: 'success',
              });
            }
          });
        };
      } catch (e) { }
    },
    getUpdateEvent() {
      const $table = this.$refs.common.$refs.table;
      const updateRecords = $table.getUpdateRecords();
      return updateRecords;
    },
    selFileList(file, fileList) {
      let formData = new FormData();
      formData.append('file', file.raw);
      const businessId = uuidv4();
      this.$api.fileUpload(this.fileId || businessId, formData).then((res) => {
        if (res.code == 0) {
          const { name: fileName, size: fileSize } = file;
          const fileObj = res.data.data ? res.data.data[0] : {};
          this.fileId = fileObj.objectId;
          this.form.contractFileList = [{ fileName, fileSize, fileUrl: fileObj.filePath }];
          VXETable.modal.message({
            content: '上传成功',
            status: 'success',
          });
        }
      });
      this.form.contractFileList = fileList;
    },
    finishUpload(response, file, fileList) {
      this.form.contractFileList = [file];
    },
    async delFile(file) {
      const type = await VXETable.modal.confirm(`确认删除${file.fileName || file.name}, 是否继续?`);
      if (type === 'confirm') {
        VXETable.modal.message({ status: 'success', content: `已删除` });
        this.form.contractFileList = this.form.contractFileList.filter((item) => item.uid !== file.uid);
      }
    },
    selParam(tree) {
      this.tableData = tree;
    },
    save() {
      console.log(123);
      this.$refs.form.validate((data) => {
        if (Object.keys(data).length === 0) {
          if (this.form.pricingType === 'CONTRACT_PRICE') {
            this.fullValidEvent();
          } else {
            this.submit();
          }
        }
      });
    },
    submit() {
      if (this.form.pricingType === 'CONTRACT_PRICE') {
        this.form.chargeDetailList = this.tableData
          .map((item) => item.chargeParamList)
          .flat(1)
          ?.map((item) => {
            /*
              这里的paramId是检测参数id，
              oldId是编辑需要的数据id
            */
            return {
              paramId: item.paramId,
              id: item.oldId,
              contractPrice: item.contractPrice || 0,
              detectQty: item.detectQty,
              totalPrice: item.totalPrice,
              totalWorkingHours: item.totalWorkingHours,
            };
          });
        this.form.chargeStdId = null;
        this.form.discountRate = null;
      } else {
        this.form.chargeDetailList = null;
      }
      this.isEdit
        ? this.$api
          .editContract({ ...this.form, discountRate: this.form.discountRate ? this.form.discountRate / 100 : null })
          .then((res) => {
            VXETable.modal.message({
              content: '修改成功',
              status: 'success',
            });
            this.back();
          })
        : this.$api
          .addContract({ ...this.form, discountRate: this.form.discountRate ? this.form.discountRate / 100 : null })
          .then((res) => {
            VXETable.modal.message({
              content: '新增成功',
              status: 'success',
            });
            this.back();
          });
    },
    async fullValidEvent() {
      const $table = this.$refs.common.$refs.table;
      const errMap = await $table.fullValidate().catch((errMap) => errMap);
      if (errMap) {
        const msgList = [];
        Object.values(errMap).forEach((errList) => {
          errList.forEach((params) => {
            const { rowIndex, column, rules } = params;
            rules.forEach((rule) => {
              msgList.push(`校验错误：${rule.message}`);
            });
          });
        });
        VXETable.modal.message({
          status: 'error',
          slots: {
            default() {
              return [
                <div class="red" style="max-height: 400px;overflow: auto;">
                  {msgList.map((msg) => (
                    <div>{msg}</div>
                  ))}
                </div>,
              ];
            },
          },
        });
      } else {
        VXETable.modal.message({ status: 'success', content: '校验成功！' });
        this.submit();
      }
    },
    download(file) {
      util.download(file.fileName, file.fileUrl);
    },
    edit() { },
    searchEvent() { },
  },
};
</script>
<style lang="scss" scoped>
::v-deep {
  .vxe-form.anthorContent-item {
    .vxe-row .vxe-form--item {
      width: 25%;
    }
  }

  .upload {
    width: 479px;
    height: 50px;
    line-height: 50px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px dashed #c0c0c0;

    .el-upload {
      width: 100%;
      height: 100%;

      .el-upload-dragger {
        width: 100%;
        height: 100%;
      }
    }
  }

  .file-tip {
    width: 56px;
    height: 16px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1f8fff;
    line-height: 16px;
  }

  .file-limit-tip {
    width: 157px;
    height: 16px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #aaaaaa;
    line-height: 16px;
  }

  .anthorContent-item-fileList {
    margin-top: 10px;

    .fileList-item {
      display: inline-block;
      height: 42px;
      line-height: 42px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #cccccc;
      padding: 0 10px;
      margin-bottom: 5px;

      .fileList-item-filename {
        flex: 1;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
        line-height: 22px;
        text-overflow: ellipsis;
      }

      .fileList-item-beforeIcon {
        color: #1f8fff;
        margin-right: 10px;
      }

      .fileList-item-afterIcon {
        margin-left: 10px;
      }
    }
  }
}
</style>
